<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021/7/30
  Time: 14:58
  To change this template use File | Settings | File Templates.
--%>

<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>

<html>
<head>
    <title>DeepSpace</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css"  media="all">
    <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js" charset="utf-8"></script>
    <style>
        #login-box {
            border: 1px solid white;
            width: 30%;
            text-align: center;
            margin: 0 auto;
            margin-top: 15%;
            background: #00000080;
            padding: 20px 50px;
        }
        #login-box h1 {
            color: white;
        }
        #login-box .form .item input {
            width: 200px; /* 设置合适的宽度 */
            border: 0; /* 首先将边界取消，方便下面修改下部边界宽度 */
            border-bottom: 1px solid white; /* 将下边界进行修改，显示出横线效果 */
            font-size: 18px; /* 将字体适当的变大加粗 */
            background: #ffffff00; /* 将输入框设置为透明 */
            color: white; /* 上面的文本颜色设置为白色，但是placeholder的颜色要单独设置 */
            padding: 5px 10px; /* 为了placeholder的内容不是顶格显示，增加内部边界 */
        }


    </style>
</head>
<body background="../../imgs/08.jpg" style=" background-repeat:no-repeat ;background-size:100% 100%;
background-attachment: fixed;">
<script type="text/javascript">
    function clearForm() {
        document.getElementById("adminLoginForm").reset();
        layui.form.render();
    }

</script>
<img src="../../imgs/222.png" alt="Deep Space" style="margin-left: 35%;margin-right: 25%;margin-top: 5%"  >
<form  id="adminLoginForm" action="${pageContext.request.contextPath}/Admin/login" method="POST">

    <div id="login-box">
        <h1>Deep.Space</h1> <!-- 大标题 -->

        <div class="form">
            <div class="item"> <!-- username部分 -->
                <i class="layui-icon layui-icon-username" style="font-size: 28px; color: #ffffff;"></i>  <!-- 将来用来绘制username前面的图标 -->
                <input type="text" placeholder="username" name="name" > <!-- 用文本框实现的username的输入 -->
            </div>

            <div class="item"> <!-- password部分 -->
                <i class="layui-icon layui-icon-password" style="font-size: 28px; color: #ffffff;"></i> <!-- 将来用来绘制password前面的图标 -->
                <input type="password" placeholder="password" name="pwd"> <!-- 用password文本框实现的密码输入 -->
            </div>
        </div>
        <button type="submit" class="layui-btn layui-btn-radius" style="margin-top: 18px;"  >登录</button>
        <!-- 用button实现的Login登陆按钮 -->
        <a href="javascript:void(0)" class="layui-btn layui-btn-radius" style="margin-top: 18px;" onclick="clearForm();">重置</a>
    </div>
</form>
</body>
</html>
